<template>
  <div>
      <button @click="getData">获取数据</button>
      <!-- <div>网络数据：{{data}} </div>-->

      <!-- 由于网络请求是异步操作，所有数据项 data的值 -->
      <!-- 初始时null，请求到数据以后 才被赋予真正的数据 -->
      <!-- 使用时,必须判断 data 不是null 在使用,才不会报错 -->

      <!-- v-if:如果值是真的,才会加载这个dom元素 -->
      <div v-if="data">
        <div>message:{{data.message}}</div>
        <!-- 遍历展示 list -->
        <div v-for="(x,i) in data.data.list" :key="i">
          {{x.title}}
        </div>
      </div>
  </div>
</template>

<script>
// axiso:网络请求模块，前提要先安装 npm i axios vue-axios
// 使用方式分两种：局部 全局
// 局部用法：在 .vue 文件中， 引入axios模块
// ES6的模块导入语法，对应的旧语法 const axios = require(axios)
// 页面没有报错，说明以安装
import axios from 'axios'
  export default {
    // 页面上只能显示 data 选项中的数据
    data() {
      return {
        // 提前准备一个变量，用于存储请求到的数据
        // 属性名随意 ， data更专业 - 数据
        data: null, //初始值为空
      }
    },
    methods: {
      getData() {
          const url = 'http://api.xin88.top/car/news.json'        
          // get(接口地址)
          // then：然后；请求完毕后执行这里的箭头函数
          axios.get(url).then(res=>{
            // res:response响应；代表服务器响应的数据
            console.log('res:',res);
            // 把请求到的数据 保存到 本地准备的 data 变量
            this.data = res.data
          })
      }
    },
  }
</script>

<style lang="scss" scoped>

</style>